// 插件定义

/** const plugin = {
        install(app) {
        注册全局组件
        注册全局指令
        原型对象上挂东西
     }
 }
    function plugin(app) {

    }
*/
// 指令定义
/**
    const app = createApp()
    app.directive('指令名称', {
        // 当指令挂载到 dom 时触发
        mounted() {

        }
    })
 */

/**
     1. 按照vue3的最新语法 定义一个插件 然后注册好
     2. 先不管指令的具体逻辑 定义一个基础指令
     3. 实现剧吐的指令逻辑
 */

import { useIntersectionObserver } from '@vueuse/core'
// 定义插件
const directivePlugin = {
  install (app) {
    console.log(app)
    // 注册指令
    app.directive('img-lazy', {
      // <img v-img-lazy='imgurl'> 当指令正式挂载到dom上时自动触发这个mounted钩子函数
      mounted (el, binding) {
        // el: 绑定谁身上就指代哪个 dom 元素
        // binding.value: 指令等于号后面绑定的表达式的值 imgurl

        // 具体的指令逻辑
        // 思考: 图片只有进入到视口区域才去正式加载
        // 关键点: 1. 如何知道图片进入到视口区域    2. 如何让一个图片正式发送请求
        // 解决: 1. vueuse  2. img.src = 'url'
        useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 为 true时, 代表进入到视口区域
            if (isIntersecting) {
              el.src = binding.value
            }
          }
        )
      }
    })
  }
}

export default directivePlugin
